<template>
  <div class="header">
    <div class="container row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-sx-12">
          <div class="tab-bar">
            <div @click="toHome" class="logo">李建平</div>
            <label @click="hiddenImage" for="control" class="task">
              <div></div>
            </label>
            <input id="control" type="checkbox">
            <Tags :tags="tags" class="links">
              <div @click="isShow"><router-link class="link" to="#">
                <span class="iconfont iconhuanfu"></span>换肤</router-link></div>
            </Tags>
            <div class="search">
              <input type="search" disabled>
              <span class="iconfont iconsearch"></span>
            </div>
          </div>
          <change-image class="change-background"  v-if="isactive"></change-image>
        </div>
    </div>
  </div>
</template>

<script>
import Tags from "../common/Tags";
import ChangeImage from "./ChangeImage";
export default {
  name: "TabBar",
  props:['tags'],
  components:{
    Tags,ChangeImage
  },
  data(){
    return{
      isactive:false,
    }
  },
  methods:{
    isShow(){
      this.isactive = !this.isactive;
    },
    hiddenImage(){
      this.isactive = false;
    },
    toHome(){
      this.$router.push({
        path:'/home'
      })
    },
  }

}
</script>

<style scoped>
.header >div{
  position: relative;
}
.tab-bar{
  display: flex;
  margin: 1rem 0;
  padding: 1rem;
  align-items: center;
  border-bottom: 4px solid #41a8a5 ;
  background-color: rgba(194, 153, 153,.5);
}
.logo{
  margin-right: 10rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: greenyellow;
  text-shadow: 0 0 5px #03e9f4;
  cursor: pointer;
  animation: colorC 10s linear infinite;
}
@keyframes colorC {
  25%{
    color: #03e9f4;
  }
  50%{
    color: #ee9900;
  }
  75%{
    color: #54BC4B;
  }
  100%{
    color: #ffff00;
  }
}
/*task*/
#control{
  display: none;
}
.task{
  display: none;
  width: 50px;
  height: 50px;
  position: relative;
  /*margin: 0 auto;*/
}
.task >div{
  width: 25px;
  height: 2px;
  top: 50%;
  left: 15px;
  position: absolute;
  background-color: #53555c;
}
.task >div::before{
  transform: translateY(-300%);
}
.task >div::after{
  transform: translateY(300%);
}
.task >div::before,
.task >div::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #53555c;
  transition: all .3s ease;
}

.task:hover div::before{
  transform: rotateZ(90deg);
}
.task:hover div:after{
  transform: rotateZ(-90deg);
}
.links{
  margin-right: auto;
  flex-grow: 1;
  font-size: 18px;
  font-weight: bold;
  color: #41a8a5;
  text-shadow: 0 0 5px rgba(0,0,0,.5);
}
.link >span{
   font-size: 1.2rem;
}
a{
  color: #1abc9c;
  font-size: 1.2rem;
  text-decoration: none;
}
.search{
  position: relative;
  text-align: center;
}
.search span{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  text-align: center;
  font-size: 1rem;
  line-height: 32px;
  padding: 0 5px;
  background-color: #c0c0c0;
  border-radius: 0 15px 15px 0;
  transition: all .5s ease;
}
.search span:hover{
  box-shadow: 0 0 5px #1abc9c;
}
input[type='search']{
  width: 160px;
  height: 30px;
  font-size: 14px;
  outline: none;
  padding: 0 .5rem;
  color: #ff0000;
  border: 1px solid #cccccc;
  background-color: #dddddd;
  border-radius: 15px;
  box-sizing: border-box;
}
input:focus{
  background-color: #ffff00;
}

/*换肤设置*/
.change-background{
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 100;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 20px;
  background-color: rgba(255,255,255,.9);
  transform: translateY(100%);
}
.change-background::before{
  content: "";
  position: absolute;
  border: 15px solid transparent;
  border-bottom-color: #ffffff;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
}



@media only screen and (max-width: 768px) {
  .tab-bar{
    display: flex;
    flex-wrap: wrap;
  }
  .logo{
    margin-right: auto;
  }
  .task{
    display: block;
  }
  .links{
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;

  }
  .links,.search{
    display: none;
  }
   input:checked +.links,
   input:checked +.links +.search{
    display: block;
  }
}
</style>